<template>
  <div class="main">
    <p class="border-bottom main-title">安全验证</p>
    <div class="main-center">
      <div class='salf-verify'>
        <p>您可以通过以下方式进行安全验证</p>
        <button class="phone">安全手机</button>
      </div>
      <div class="salf-verify">
        <p class="text">点击获取验证码,短信将发送至安全手机{{phone}}</p>
        <input type="text" v-model="verify"><button class="a-code" @click="getVerify">获取验证码</button>
      </div>
      <el-button :plain="true" class="btn default-btn" v-if='!hasVerify' @click="errorFun">下一步</el-button>
      <router-link :to="{path:'/findpass/end',query:{id:phone,verify: verify}}"  tag="button" class="btn" v-if='hasVerify'>下一步</router-link>
    </div>
  </div>
</template>

<script>
import Services from '@/service/service';
export default {
  name: 'FindTwo',
  data(){
    return{
      phone:'',
      hasVerify:false,
      verify:''
    }
  },
  mounted () {
    this.getParam()
  },
  methods: {
    getParam(){

      this.phone = this.$router.history.current.query.id;
    },
    save(){
      let data={
        param:{
          phoneNumber:this.detail.phoneNumber
        }
      };
      Services.myAjax({
        methods:"post",
        url:Services.baseUrl+"/FindTwo/save",
        data:data
      })
    },
    errorFun (){
      this.$message.error('验证码错误！');
    },
    getVerify (){
      // 获取验证码
      const tel= this.phone;
      let getVerifyData = {
        param: {
          type: 2,
          phone: tel
        }
      };
      Services.myAjax(
        {
          method: "post",
          url: Services.baseUrl + "/user/getVerifyCode",
          data: getVerifyData
        },
        function(response) {
          console.log(response)
          // 是评论数据，由于接口没有返回值，须在调试
        },
        function(error) {}
      );

    }
  },
  watch: {
    verify (newVal,oldVal){
      if(newVal!=''){
        this.hasVerify = true;
      }else{
        this.hasVerify = false;
      }
    }
  },
};
</script>
<style lang="stylus" scoped>
@import '~styles/variables';

.main {
  width: 14rem;
  height: 6.3rem;
  margin-left: 2.6rem;
  margin-top: 0.85rem;
  background: #f5f5f5;

  .main-title {
    font-size: 0.24rem;
    padding: 0.2rem;
  }

  .main-center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 5rem;
    position: relative;
    top: 1rem;
    margin: auto;
    height: 3rem;
    font-size: 0.226rem;

    .salf-verify{
      font-size 18px;
      font-weight 600
    }
    .phone {
      padding: 0.1rem 0.15rem;
      margin-top: 0.2rem;
      font-size:14px
    }
  }

  .text {
    margin-bottom: 0.15rem;
  }

  .a-code {
    // padding: 0.1rem 0.15rem;
    display: inline-block;
    height:48px;
    line-height:48px;
    width:1rem;
    font-size:14px;
    border-top-right-radius:48px;
    border-bottom-right-radius:48px;
    cursor pointer
  }

  .main-center input {
    height: 48px;
    line-height: 48px;
    text-indent: 16px;
    border-top-left-radius: 48px;
    border-bottom-left-radius: 48px;
  }

  .btn {
    background: $logoColor;
    height: 48px;
    line-height: 48px;
    border-radius: 48px;
    font-size:16px;
    padding:0
  }
}
</style>
